<template>
  <div>
    <My-life :text="val"></My-life>
  </div>
</template>

<script>
import MyLife from "../components/MyLife.vue";

export default {
  data() {
    return {
      val: 2,
    };
  },
  components: {
    MyLife,
  },
  //初始渲染时，父子之间的生命周期执行顺序
  //   父组件实例创建前
  //  父组件实例创建后
  //  父组件视图渲染前
  // 儿组件实例创建前
  //  儿组件实例创建后
  //  儿组件视图渲染前
  //  儿组件视图渲染前后
  //  父组件视图渲染前后
  //子组件数据更新时
  //父beforeUpdate=>子beforeUpdate=>子updated=>父updated
  beforeCreate() {
    console.log("父组件实例创建前");
  },
  created() {
    console.log("父组件实例创建后");
  },
  beforeMount() {
    console.log("父组件视图渲染前");
  },
  mounted() {
    console.log("父组件视图渲染后");
  },
  beforeUpdate() {
    console.log("父组件数据更新前");
  },
  updated() {
    console.log("父组件数据更新前");
  },
  beforeDistroy() {
    console.log("父组件实例销毁前");
  },
  distroyed() {
    console.log("父组件实例销毁后");
  },
};
</script>

<style>
</style>